<template>
	<!-- 验证手机号码 -->
	<view class="change-pass">
		<view class="pd32">
			<view class="ch-title">验证原手机号码</view>
			<view class="ch-tips">需向你手机号 <span class="phone"> {{phone}} </span> 发送短信验证码以验证身份。</view>

			<u--form labelPosition="left" labelWidth="90" :model="form" :rules="rules" ref="uForm">
				<u-form-item prop="form.code" borderBottom>
					<u-input placeholder="请输入验证码"  v-model="form.code" border="none">
						<template slot="suffix">
							<view class="getcode" v-show="codeStar">{{countDown}}秒后重新获取</view>
							<view class="getcode" v-show="!codeStar" @click="getCode">发送验证码</view>
						</template>
					</u-input>
				</u-form-item>
			</u--form>
		</view>
		<view class="btn-box">
			<button class="btn" @click="nextStep">下一步</button>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					code: ''
				},
				rules: {
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur']
					}],
				},
				countDown: 10, //60秒后重新获取
				timer: null, //定时器
				codeStar: false, //开始倒计时
				phone: null,
				phone2: null,
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		created() {},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				this.$api.getUserInfo().then(res => {
					console.log("用户信息", res.data)
					this.phone = res.data.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
					this.phone2 = res.data.phone;
				})
			},
			// 获取验证码
			getCode() {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})

				this.$api.loginSendCode({
					phone: this.phone2,
					type : 3,
				}).then(res => {
					uni.hideLoading();
					this.countDown = 60
					this.codeStar = true
					uni.$u.toast('验证码已发送');
					this.timer = setInterval(() => {
						this.countDown--
						if (this.countDown == 0) {
							this.codeStar = false
							clearInterval(this.timer)
						}
					}, 1000)
				})


				// setTimeout(() => {
				// 	uni.hideLoading();
				// 	this.countDown = 10
				// 	this.codeStar = true
				// 	// 这里此提示会被this.start()方法中的提示覆盖
				// 	uni.$u.toast('验证码已发送');
				// 	this.timer = setInterval(() => {
				// 		this.countDown--
				// 		if (this.countDown == 0) {
				// 			this.codeStar = false
				// 			clearInterval(this.timer)
				// 		}
				// 	}, 1000)

				// }, 2000);
			},

			verificationPhoneCode() {
				return this.$api.verificationPhoneCode({
					phone: this.phone2,
					code: this.form.code
				}).then(res => {
					// console.log(res.data,"结果")
					return res.data
				})
			},

			//下一步
			async nextStep() {
				try {
					// 使用 await 等待 verificationPhoneCode 的结果
					const result = await this.verificationPhoneCode();
					console.log(result, "结果");

					// 检查 result 是否包含所需的数据
					if (result) {
						uni.navigateTo({
							url: '/pages/my/pages/changePhoneNumber'
						});
					} else {
						uni.$u.toast('失败');
					}
				} catch (error) {
					// 处理可能出现的错误
					console.error(error);
					uni.$u.toast('验证失败');
				}
			}

		},

	}
</script>

<style lang="scss" scoped>
	.pd32 {
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.ch-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #040515;
		line-height: 38rpx;
		padding: 70rpx 0 0;
		margin: 0rpx 0 16rpx;
	}

	.ch-tips {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 28rpx;
		margin-bottom: 44rpx;

		.phone {
			color: #333333;
			margin: 0 10rpx;
		}
	}

	.box {
		padding: 30rpx 0rpx;
		border-bottom: 1rpx solid #F0F1F5;
		border-radius: 10rpx;
		font-size: 26rpx;

		.ce {
			color: #909299;
		}

		.fs30 {
			font-size: 30rpx;
		}

		.icon {
			width: 30rpx;
			height: 30rpx;
		}

		.icon-back {
			width: 20rpx;
			height: 20rpx;
			margin-left: 8rpx;
		}

		.headImg {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		input {
			// text-align: right;
		}

	}

	.up-box {
		display: flex;
		align-items: center;
		height: 80rpx;

		::v-deep .u-upload__button {
			margin: 0;
		}
	}


	.w300 {
		width: 180rpx;
	}

	/deep/.u-form-item__body.data-v-067e4733 {
		padding: 40rpx 0 32rpx;
	}
</style>